<template>
	<div class="app">
		<!-- <h2>name {{ $store.state.name }} level {{ $store.state.level }}</h2> -->
		<h2>name {{ name }} level {{ level }}</h2>
		<button @click="changeNameFn">修改name</button>
		<button @click="incrementLevelFn">level++</button>
		<button @click="changeInfoFn">changeInfo</button>
	</div>
</template>

<script>
	import { mapMutations, mapState } from 'vuex'
	import { CHANGE_INFO } from './store/mutation_type'
	export default {
		computed: {
			...mapState(['name', 'level']),
		},
		methods: {
			...mapMutations(['changeName', 'incrementLevel']),
			changeNameFn() {
				// 不能直接修改修改state, 必须要提交mutation,mutation在修改state, 目的是为了插件中方便记录state的变化
				// this.$store.commit('changeName')
				this.changeName('张三')
			},
			incrementLevelFn() {
				// this.$store.commit('incrementLevel')
				this.incrementLevel()
			},
			changeInfoFn() {
				this.$store.commit(CHANGE_INFO, {
					name: '王五',
					level: 3,
				})
			},
		},
	}
</script>

<script setup></script>

<style scoped></style>
